<template>
  <div class="page-post">
    <template v-if="postInfo">
      <div class="featured-media" v-if="postInfo.photos.length > 0">
        <img v-lazy="postInfo.photos[0]" alt />
      </div>

      <div class="article">
        <div class="article__h1">{{ postInfo.title }}</div>
        <div class="article__section">
          <div class="article__p">{{ postInfo.content }}</div>
          <div class="article__meta">
            <div>{{ postInfo.user.username }}</div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import Axios from "axios";

export default {
  name: "Post",

  data() {
    return {
      postInfo: null
    };
  },

  methods: {
    getPostInfo() {
      this.$toast.loading({
        duration: 0,
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner"
      });

      const id = this.$route.params.id;
      Axios.get(`http://localhost:3000/posts/${id}?_expand=user`).then(
        response => {
          const { data } = response;
          this.postInfo = data;
          this.$toast.clear();
        }
      );
    }
  },

  created() {
    this.getPostInfo();
  }
};
</script>

<style lang="scss">
.page-post {
  .featured-media {
    img {
      width: 100%;
      height: 220px;
    }
  }
  .article {
    padding: 24px;
    font-size: 16px;
    &__h1 {
      font-size: 22px;
      font-weight: 700;
      line-height: 1.4;
      margin-bottom: 0.8em;
    }
    &__p {
      margin-bottom: 0.8em;
    }
    &__meta {
      display: flex;
      justify-content: flex-end;
      color: #999;
      margin-bottom: 0.8em;
    }
  }
}
</style>